<!--
 * @Author: your name
 * @Date: 2021-01-04 11:38:57
 * @LastEditTime: 2021-01-25 14:35:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="add-qrcode">
    <Breadcrumb :navList="['销售管理', '添加销售']"></Breadcrumb>
    <FromContainer>
      <el-form
        ref="subform"
        :rules="rules"
        :model="sizeForm"
        label-width="80px"
        size="mini"
      >
        <el-form-item prop="ad_person_name" label="销售名">
          <el-input
            placeholder="请输入销售人员名称"
            v-model="sizeForm.ad_person_name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="is_start" label="是否启用">
          <el-radio-group v-model="sizeForm.is_start">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="page_id" label="所属页面">
          <el-select v-model="sizeForm.page_id" placeholder="请选择落地页">
            <el-option
              v-for="item in pageList"
              :key="item.id"
              :label="item.page_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="image" label="上传销售二维码">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-change="qrcodeChange"
            :auto-upload="false"
            list-type="picture"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            placeholder="请输入人员备注"
            v-model="sizeForm.comment"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </FromContainer>
  </div>
</template>

<script>
import { compressImage } from "@/utils/compressImage"; // 图片压缩方法
export default {
  created() {
    this.getPages();
  },
  data() {
    return {
      sizeForm: {
        ad_person_name: "",
        comment: "", //备注
        is_start: 1,
        image: "",
        page_id: "",
      },
      rules: {
        ad_person_name: [
          { required: true, message: "请输入人员名称", trigger: "blur" },
        ],
        // comment: [{ required: true, message: "请输入备注", trigger: "change" }],
        is_start: [
          { required: true, message: "请选择销售状态", trigger: "change" },
        ],
        page_id: [
          { required: true, message: "请选择销售所属页面", trigger: "change" },
        ],
        image: [{ required: true, message: "请选择图像", trigger: "change" }],
      },
      imageUrl: "", //   选择图片
      pageList: [],
    };
  },
  methods: {
    // 获取页面列表
    async getPages() {
      const { code, data } = await this.$api.getPages();
      if (!code) {
        this.pageList = data;
      }
    },
    //   提交表单
    onSubmit() {
      this.$refs["subform"].validate(async (valid) => {
        if (valid) {
          const { code, msg } = await this.$api.addSell(this.sizeForm);
          if (!code) {
            this.$message.success(msg);
          }
          for (let key in this.sizeForm) {
            this.sizeForm[key] = key == "is_start" ? 1 : "";
          }
          this.imageUrl = "";
        } else {
          this.$message.error("请输入有效的值!");
          return;
        }
      });
    },
    //选中图片
    qrcodeChange(files) {
      const config = {
        width: 500, // 压缩后图片的宽
        // height: 140/250*500, // 压缩后图片的高
        quality: 1, // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      };
      compressImage(files.raw, config).then((result) => {
        const fileSize = parseFloat(
          parseInt(result.size) / 1024 / 1024
        ).toFixed(2);
        if (!+fileSize) {
          this.sizeForm.image = files.raw;
        } else {
          this.sizeForm.image = result;
        }
        console.log("this.sizeForm.image :>> ", this.sizeForm.image);
        this.imageUrl = files.url;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.add-qrcode {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 250px;
    // height: 178px;
    display: block;
  }
}
</style>